<script setup lang="ts">
import ace from 'ace-builds'
import 'ace-builds/src-noconflict/mode-javascript'
import 'ace-builds/src-noconflict/snippets/javascript'
import 'ace-builds/src-noconflict/ext-language_tools'
import {defineComponent, onMounted, onUpdated, ref} from "vue";


const props = defineProps({
  modelValue: String
})

const emit = defineEmits(['update:modelValue'])

const ace_dom = ref(null)
onMounted(() => {
  const editor = ace.edit(ace_dom.value, {
    enableSnippets: true,
    enableBasicAutocompletion: true,
    enableLiveAutocompletion: true,
    maxLines: 50, // 最大行数，超过会自动出现滚动条
    minLines: 30, // 最小行数，还未到最大行数时，编辑器会自动伸缩大小
    fontSize: 14, // 编辑器内字体大小
    mode: 'ace/mode/javascript', // 默认设置的语言模式
    tabSize: 4, // 制表符设置为 4 个空格大小
    useWorker: false,
    value: props.modelValue || '', // 格式化代码的话这行代码就没必要存在了。
  })

  // 如果需要格式化代码， 添加下面这代码
  // editor.setValue(beautify(props.modelValue || "", {/* 格式化代码配置项 */}), 1);

  editor.getSession().on('change', () => emit('update:modelValue', editor.getValue().trim()))
})

onUpdated(() => {
  // 重新渲染
  ace.edit(ace_dom.value).setValue(props.modelValue || '', 1)

})


defineComponent({
  name: 'code-editor',
})

</script>

<template>
  <div ref="ace_dom"></div>
</template>

<style scoped>

</style>
